<script type="text/html" data-help-name="ui_list">
    <p>項目リスト表示Node-RED widgetノード</p>

    <h3>入力</h3>
    <dl class="message-properties">
        <dt>payload<span class="property-type">配列</span></dt>
        <dd>以下の属性を持つオブジェクト配列:
            <ul>
                <li><b>title</b> - 要素のタイトル,</li>
                <li><b>description</b> - 要素の説明。種別が「<b>1行</b>」の場合は省略可(省略可),</li>
                <li><b>menu</b> - メニュー要素(省略可),</li>
                <li><b>icon</b> - アイコンのURL (省略可),</li>
                <li><b>icon_name</b> - フォントアイコン名 (省略可).</li>
            </ul>
        </dd>
    </dl>
    
    <h3>出力</h3>
    <dl class="message-properties">
        <dt>payload<span class="property-type">オブジェクト</span></dt>
        <dd>要素もしくはメニュー要素がクリックもしくはチェックされた場合、要素を出力ポートに送信します。</dd>
    </dl>

    <h3>詳細</h3>
    <p>要素配列を表示するUI widgetです。</p>
    <p><code>msg.payload</code>に要素配列を渡します。要素は<code>title</code>、<code>description</code>、<code>menu</code>、<code>icon</code>および<code>icon_name</code>プロパティを含みます。<code>description</code>、<code>menu</code>、<code>icon</code>および<code>icon_name</code>プロパティは省略可能です。</p>
    <p>要素の表示形式は<code>表示形式</code>メニューから選択可能です。</p>
    <p>要素の対する動作は<code>動作</code>メニューから選択できます:</p>
    <ul>
        <li><b>なし</b> - 動作なし,</li>
        <li><b>クリックした要素を送信</b> - クリック時に要素を出力ポートに送信,</li>
        <li><b>チェック状態が変化した要素を送信</b> - チェックボックスの状態が変化した場合、要素を出力ポートに送信。チェックボックス状態は、出力されるペイロードオブジェクトの<code>isChecked</code>フラグに設定します。</li>
        <li><b>スイッチが変化した要素を送信</b> - スイッチの状態が変化した場合、要素を出力ポートに送信。スイッチ状態は、出力されるペイロードオブジェクトの<code>isChecked</code>フラグに設定します。</li>
        <li><b>選択されたメニュー要素を送信</b> - メニュー要素が選択された場合、要素を出力ポートに送信。選択された要素は、出力されるペイロードオブジェクトの<code>selected</code>プロパティに設定します。</li>
    </ul>
    <p>「<b>テキストにHTMLタグを利用</b>」チェックボックスを選択すると、HTMLタグを<code>title</code>および<code>description</code>で使用できます。</p>
    <p><code>icon</code>もしくは<code>icon_name</code>プロパティでアイコンを指定できます。<code>icon</code>はアイコンファイルのURLを指定します。<code>icon</code>が<code>null</code>の場合、空のアイコンを表示します。<code>icon_name</code>はフォントアイコンのアイコン名を指定します。<code>icon</code>と<code>icon_bame</code>を両方指定した場合、<code>icon</code>を優先します。</p>
</script>
